<template>
  <div>
    <el-table height="100px" v-adaptive :data="deviceGroupEleList">
      <el-table-column prop="id" label="id" v-if="false" />
      <el-table-column prop="device.token" label="元素Token">
        <template slot-scope="scope">
          <div v-if="scope.row.device">{{ scope.row.device.token }}</div>
          <div v-if="scope.row.deviceGroup">
            {{ scope.row.deviceGroup.token }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="device.comments" label="名称">
        <template slot-scope="scope">
          <div v-if="scope.row.device">{{ scope.row.device.comments }}</div>
          <div v-if="scope.row.deviceGroup">
            {{ scope.row.deviceGroup.name }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="role" label="角色">
        <template slot-scope="scope">
          <div v-html="formatterRole(scope.row.roles)"></div>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="device.comments"
        label="说明"
        width="300"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.device">{{ scope.row.device.comments }}</div>
          <div v-if="scope.row.deviceGroup">
            {{ scope.row.deviceGroup.description }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <!--<el-button type="text" size="mini" icon="el-icon-view" @click.native="openEleDetail(scope.row)"></el-button>-->
          <!--<el-button type="text" size="mini" icon="el-icon-edit-outline" @click="editElement(scope.row)"></el-button>-->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="deleteElement(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getDeviceElements, delDeviceElements } from "@/api/deviceGroup";
export default {
  props: {
    deviceGroupToken: {
      type: String,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      total: 0,
      deviceGroupEleList: [],
      showElementDetail: false,
      showElementEditor: false,
      deviceGroupTokens: this.deviceGroupToken,
    };
  },
  mounted() {
    this.getDeviceGroupElement();
  },
  methods: {
    getDeviceGroupElement() {
      var params = {
        includeDetails: true,
        page: this.pageNum,
        pageSize: this.pageSize,
      };
      getDeviceElements(params, this.deviceGroupTokens).then((res) => {
        this.total = res.data.numResults;
        this.deviceGroupEleList = res.data.results;
        this.$emit("resultDataNum", res.data.numResults);
      });
    },
    openEleDetail(row) {
      this.showElementDetail = true;
    },
    // 打开编辑弹窗
    editElement(row) {
      this.showElementEditor = true;
    },
    deleteElement(row) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delDeviceElements(row.id, this.deviceGroupTokens).then((res) => {
          this.$msg({
            type: "success",
            message: "删除成功!",
          });
          this.getDeviceGroupElement();
        });
      });
    },
    formatterRole(data) {
      let value = data.join("</br>");
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.deviceGroupTab {
  height: calc(100vh - 150px - 247px - 46px - 72px) !important ;
  overflow-y: auto;
}
</style>
